<template>
  <div>
    <van-pull-refresh v-model="isLoading" @refresh="pullDown">
      <top-bar title="首页" :hasBack="false"></top-bar>
      <van-search :value="searchValue" shape="round" background="#4fc08d" placeholder="请输入搜索关键词" />
      <van-notice-bar left-icon="volume-o" :text="notice || '欢迎来到云上校园' " scrollable />
      <div class="swiper">
        <van-swipe :autoplay="3000" indicator-color="#fff">
          <van-swipe-item :lazy-render="true" v-for="item in SwiperImg" :key="item.filename">
            <img v-lazy="item.path" />
          </van-swipe-item>
        </van-swipe>
      </div>
      <h2 class="van-doc-demo-block__title">我的功能</h2>
      <van-grid :column-num="columnNum">
        <van-grid-item
          v-for="item in gridList"
          :key="item.id"
          :icon="item.icon"
          :text="item.content"
          :to="item.url"
        />
      </van-grid>
      <h2 class="van-doc-demo-block__title">最近动态</h2>

      <van-list
        style="margin-bottom: 15vh;"
        v-model="loading"
        :finished="completed"
        :immediate-check="false"
        finished-text="没有更多了"
        loading-text="拼命加载中..."
        @load="pullUp"
      >
        <Dynamic @getDynamicList="getDynamicList" :contentList="contentList"></Dynamic>
      </van-list>
    </van-pull-refresh>
  </div>
</template>

<script>
import TopBar from "@/views/component/topBar";
import Dynamic from "./component/dynamic.vue";
import { mapState } from "vuex";
export default {
  components: {
    TopBar,
    Dynamic
  },
  data() {
    return {
      searchValue: "",
      gridList: [
        {
          id: 1,
          icon: "newspaper-o",
          content: "校园简介",
          url: "/"
        },
        {
          id: 4,
          icon: "smile-comment-o",
          content: "学生组织简介",
          url: "/organization/list"
        },
        {
          id: 5,
          icon: "flag-o",
          content: "活动中心",
          url: "/activity/list"
        },
        {
          id: 7,
          icon: "photo-o",
          content: "赛事中心",
          url: "/competition/list"
        },
        // {
        //   id: 6,
        //   icon: "medal-o",
        //   content: "奖项汇总"
        // },
        // {
        //   id: 8,
        //   icon: "column",
        //   content: "书籍借阅"
        // },
        {
          id: 2,
          icon: "calendar-o",
          content: "校历",
          url: "/calendar"
        },
        {
          id: 3,
          icon: "bullhorn-o",
          content: "好物推送",
          url: "/recommend/list"
        }
      ],
      columnNum: "3",
      notice: "",
      SwiperImg: [],
      list: [],
      contentList: [],
      pageSize: 10,
      pageNum: 1,
      dynamicForm: {},
      loading: false,
      completed: false,
      isLoading: false,
      finished: false
    };
  },
  computed: {
    ...mapState({
      userInfo: state => state.userInfo
    })
  },
  mounted() {
    this.getTemplate();
    this.getDynamicList();
  },
  methods: {
    // 获取公告和图片
    getTemplate() {
      this.$api.get("/api/home/list").then(res => {
        this.notice = res.data.data[0].notice;
        this.SwiperImg = res.data.data[0].swipeImg;
      });
    },
    getDynamicList() {
      this.dynamicForm.pageSize = this.pageSize;
      this.dynamicForm.pageNum = this.pageNum;
      this.$api
        .get("/api/dynamic/list", { params: this.dynamicForm })
        .then(res => {
          this.contentList.push(...res.data.data.records);
          this.loading = false;
          if (this.pageSize * this.pageNum > res.data.data.total) {
            this.completed = true;
          }
          this.isLoading = false;
        })
        .catch(err => {
          console.log(err);
        });
    },
    // 上滑加载
    pullUp() {
      if (this.completed) {
        return;
      }
      this.pageNum++;
      this.getDynamicList();
    },
    // 下拉刷新
    pullDown() {
      this.list = [];
      this.pageNum = 1;
      this.completed = false;
      this.isLoading = true;
      this.contentList = [];
      this.getTemplate();
      this.getDynamicList();
    }
  }
};
</script>

<style scoped>
.swiper {
  width: 100%;
  height: 3.4rem;
}
.swiper .van-swipe {
  width: 100%;
  height: 100%;
}
.swiper img {
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.swiper .custom-indicator {
  position: absolute;
  right: 5px;
  bottom: 5px;
  padding: 2px 5px;
  font-size: 12px;
  color: #fff;
  background: #fff;
}
.van-doc-demo-block__title {
  margin: 0;
  padding: 32px 16px 16px;
  color: rgba(69, 90, 100, 0.6);
  font-weight: normal;
  font-size: 14px;
  line-height: 16px;
}
</style>